<template>
  <div id="group_container" style="height: 98%">
    <el-card>
      <!-- 头部搜索 -->
      <div class="searchDiv">
        <!-- <div style="justify-content: flex-start; flex: 10;"> -->
        <div class="searchDivLeft">
          類別名称：
          <el-input v-model="schdule.searchbean.stTittle" placeholder="内容を入力してください" clearable style="width: 200px; height: 40px"></el-input>
          <el-button type="primary" v-preventReClick class="search" @click="getSchduleItem"><i class="el-icon-search el-icon--left"></i>検索</el-button>
        </div>
        <div class="searchDivRight">
          <el-button type="primary" v-preventReClick @click="addType"><i class="el-icon-plus el-icon--left"></i>新規</el-button>
          <el-button type="warning" v-preventReClick @click="addEdit"><i class="el-icon-edit el-icon--left"></i>修正 </el-button>
          <el-button type="danger" v-preventReClick @click="remove"><i class="el-icon-delete el-icon--left"></i>削除 </el-button>
        </div>
        <!-- </div> -->
      </div>
      <el-table
        ref="multipleTable"
        :data="schdulelist"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{ background: '#f2f2f2', color: '#606266' }"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="stTittle" label="日程類別名称" align="center"> </el-table-column>
      </el-table>
      <div class="block" style="margin-bottom: 0; margin: auto; text-align: center; margin-top: 50px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="schdule.indexPage"
          :page-size="schdule.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- 添加信息的对话框 -->
      <el-dialog v-model="addDialogVisible" title="日程類別新規" width="30%" center>
        <el-form :model="addForm">
          <el-form-item label="日程類別名称" prop="">
            <el-input v-model="addForm.stTittle" maxlength="50"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="saveSchdule" v-preventReClick icon="el-icon-circle-check" align="center">保存</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 編輯信息的对话框 -->
      <el-dialog v-model="EditVisible" title="日程類別編集" width="30%" center>
        <el-form :model="editForm" ref="addEditRef">
          <el-form-item label="日程類別名称" prop="">
            <el-input v-model="editForm.stTittle" maxlength="50"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="updataSchdule" v-preventReClick icon="el-icon-circle-check" align="center">保存</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      noClick: true,
      // 獲取日程类别信息
      schdule: {
        searchbean: {
          stTittle: ''
        },
        indexPage: 1,
        pageSize: 8
      },
      // 獲取過來的小組數組
      schdulelist: [],
      total: 0,
      currentPage4: 4,
      multipleSelection: [],
      // 控制添加对话框的显示与隐藏
      addDialogVisible: false,
      // 控制編輯对话框的显示与隐藏
      EditVisible: false,
      // 添加用户的表单数据
      addForm: {
        groupEnterpriseGuid: this.$store.getters.showentergroup,
        stTittle: '',
        userid: this.$store.getters.showuserGuid
      },
      // 编辑用户的表单数据
      editForm: {
        groupEnterpriseGuid: this.$store.getters.showentergroup,
        stId: '',
        userid: this.$store.getters.showuserGuid,
        stTittle: ''
      },
      // 刪除數據id數組
      removeID: { stIds: [] },
      selectID: {
        stId: ''
      }
    }
  },
  // 頁面初加載
  created() {
    this.getSchduleItem()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分頁查詢數據
    getSchduleItem() {
      this.axios
        .post('/scheduletype/select/list', this.schdule)
        .then((res) => {
          this.schdulelist = res.data.data.list
          this.total = res.data.data.total
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.schdule.pageSize = newSize
      this.getSchduleItem()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.schdule.indexPage = newPage
      this.getSchduleItem()
    },
    // 新增日程类别信息
    async saveSchdule() {
      // 新增日程类别请求
      if (this.addForm.stTittle === '') {
        return this.$message.warning('日程類別名称を入力してください！')
      }
      this.axios
        .post('/scheduletype/insert', this.addForm)
        .then((res) => {
          if (res.data.success !== 1) return this.$message.error(res.data.msg)
          this.$message.success(this.$getMsg('I0001'))
          this.addDialogVisible = false
          this.getSchduleItem()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 編輯日程类别信息
    addEdit() {
      if (this.multipleSelection.length === 1) this.EditVisible = true
      else {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0001'),
          type: 'warning'
        })
      }
      this.multipleSelection.forEach((item) => {
        this.selectID.stId = item.stId
      })
      this.axios
        .post('scheduletype/select', this.selectID)
        .then((res) => {
          const schdulelist = res.data.data
          this.editForm.stTittle = schdulelist.stTittle
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 更新修改日程类别信息
    updataSchdule() {
      this.multipleSelection.forEach((item) => {
        this.editForm.stId = item.stId
      })
      this.axios
        .put('/scheduletype/update', this.editForm)
        .then((res) => {
          if (res.data.success !== 1) return this.$message.error(res.data.msg)
          this.$message.success(this.$getMsg('I0002'))
          this.EditVisible = false
          this.getSchduleItem()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 刪除日程类别信息
    remove() {
      this.removeID.stIds = []
      this.multipleSelection.forEach((item) => {
        this.removeID.stIds.push(item.stId)
      })
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      this.$confirm(this.$getMsg('I0004'), {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(
        () => {
          this.axios
            .delete('/scheduletype/delete', { data: this.removeID })
            .then(() => {
              this.$message.success(this.$getMsg('I0003'))
              this.getSchduleItem()
            })
            .catch((error) => {
              console.log(error)
            })
        },
        (res) => {
          console.log(res)
        }
      )
    },
    addType() {
      this.addDialogVisible = true
      this.addForm.stTittle = ''
    }
  }
}
</script>

<style scoped>
.search {
  margin-left: 10px !important;
}

.jiansuo {
  width: 100%;
}
/* 表格 */
.table {
  margin-top: 25px;
}
</style>
